<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="d1"></div>
<script type="text/javascript">
function createSimpleForm(){
	// Ext.form.FormPanel 可以使用Ext.form.BasicForm的属性
	// field类的元素
	// fileUpload 创建一个iframe，在隐藏的iframe中提交
	var panel = new Ext.form.FormPanel({
		title: "表单",
		height: 300,
		width: 400,
		labelAlign: "right",
		labelWidth: 60,
		method: "post",
		//fileUpload: true,
		// fieldLabel属于form布局特有的
		// anchor可以设置，form布局继承于achor布局
		items: [
			{xtype: "textfield", fieldLabel: "姓名", name: "name"},
			{xtype: "textfield", fieldLabel: "密码", inputType:"password", name: "pwd"},
			{xtype: "datefield", fieldLabel: "出生日期", name: "borndate"},
			{xtype: "textarea", fieldLabel: "简介", name: "intro", anchor:"-20, 60%"}
		],
		buttons:[
		    {text: "提交", handler: function(){
		    	// 得到BasicForm实例(或panel.form())
		    	panel.getForm().submit({
		    		url: "${path}/data/reg.do",
		    		// 返回的格式Ext.form.Action.Submit下responepacket的{\"success\":true,\"msg\":\""+name+"\"}必须是这样的，否则语法错误
		    		success: function(form, action){
		    			 // Ext.Msg.alert('成功', action.result.msg);
		    			Ext.Msg.alert("提示", "提交成功");
		    		},
		    		failure: function(form, acition){
		    			Ext.Msg.alert("提示", "提交失败");
		    		}
		    	});
		    }},
		    {text: "重置", handler: function(){
		    	panel.getForm().reset();
		    }},
		    {text: "设置", handler: function(){
		    	panel.getForm().setValues({
		    		name: "aaa"
		    	});
		    }},
		    {text: "获值", handler: function(){
		    	var value = panel.getForm().findField("name").getValue();
		    	Ext.Msg.alert("", value);
		    }},
		    // Ext.form.Action.Load
		    {text: "加载数据", handler: function(){
		    	panel.getForm().load({
					url: "${path}/data/user.do",
					params: {id: 5}
		    	});
		    }}
		]
	});
	panel.render("d1");
	// 打开信息提示
	Ext.QuickTips.init();
}
Ext.onReady(function(){
	createSimpleForm();
});
</script>
</body>
</html>
